<template>
  <div class="main">
    <div class="main_box">
      <!-- 左 -->
      <div class="left">
        <div class="write">
          <!-- 点击发布弹出遮罩层 -->
          <div class="wrt-mask-box-father" ref="wrtMask">
            <div class="wrt-mask-box">
              <div class="mask-son">
                <!-- 标题 -->
                <div class="son-title">
                  <span class="title-span">摘要</span>
                  <span class="title-span">封面</span>
                  <span class="title-span">标签</span>
                </div>
                <!-- 摘要 -->
                <div class="son-brief">
                  <el-input
                    type="textarea"
                    :rows="5"
                    placeholder="请输入摘要"
                    v-model.trim="briefContent"
                  >
                  </el-input>
                </div>
                <!-- 文章封面 -->
                <div class="son-cover">
                  <span class="cover-title">文章封面：</span>
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="1"
                    :on-exceed="handleExceed"
                    :file-list="fileList"
                  >
                    <el-button
                      size="small"
                      type="primary"
                      style="background-color: salmon; border: none"
                      >点击上传</el-button
                    >
                  </el-upload>
                </div>
                <!--  选择标签 -->
                <div class="son-tags">
                  <span class="tags-title">文章标签：</span>
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox label="复选框 A"></el-checkbox>
                    <el-checkbox label="复选框 B"></el-checkbox>
                    <el-checkbox label="复选框 C"></el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="son-btns">
                  <el-button type="info" round @click="maskCancel"
                    >取消</el-button
                  >
                  <el-button type="danger" round>发布</el-button>
                </div>
              </div>
            </div>
          </div>
          <!-- 遮罩层结束 -->

          <h2 class="write-topic">发布文章</h2>
          <div class="write-btns">
            <el-button type="info" round @click="cancel">取消</el-button>
            <el-button type="danger" round @click="release">发布</el-button>
          </div>
          <div class="write-title">
            <el-input
              resize="none"
              type="textarea"
              autosize
              placeholder="请输入标题"
              class="me-write-input"
              v-model.trim="titleTxt"
            >
            </el-input>
          </div>

          <div class="write-down">
            <mavon-editor
              class="me-editor"
              ref="md"
              v-model="content"
              @imgAdd="uploadImg"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
   // 接口
   import { richTextImgUpload } from '../../api/articlei.js';
   import MarkdownIt from 'markdown-it';
   //  markdown编辑器
   import Vue from 'vue';
   import mavonEditor from 'mavon-editor';
   import 'mavon-editor/dist/css/index.css';
   Vue.use(mavonEditor);

   export default {
     name: 'BlogWrite',
     data() {
       return {
         content: '',
         titleTxt: '',
         briefContent: '', // 摘要内容
         //  上传的封面图片
         fileList: [
           {
             name: 'food.jpeg',
             url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
           },
         ],
         checkList: [], // 标签
         articleForm: {
           editor: {
             value: '',
             ref: '', //保存mavonEditor实例  实际不该这样
             default_open: 'edit',
             toolbars: {
               bold: true, // 粗体
               italic: true, // 斜体
               header: true, // 标题
               underline: true, // 下划线
               strikethrough: true, // 中划线
               mark: true, // 标记
               superscript: true, // 上角标
               subscript: true, // 下角标
               quote: true, // 引用
               ol: true, // 有序列表
               ul: true, // 无序列表
               imagelink: true, // 图片链接
               code: true, // code
               fullscreen: true, // 全屏编辑
               readmodel: true, // 沉浸式阅读
               help: true, // 帮助
               undo: true, // 上一步
               redo: true, // 下一步
               trash: true, // 清空
               navigation: true, // 导航目录
               //subfield: true, // 单双栏模式
               preview: true, // 预览
             },
           },
         },
       };
     },
     computed: {
       markdown() {
         const md = new MarkdownIt();
         const result = md.render(this.content);
         return result;
       },
     },
     props: {
       editor: Object,
     },
     methods: {
       uploadImg(pos, $file) {
         let that = this;
         let formData = new FormData();
         formData.append('img', $file);
         // 上传图片 接口
         richTextImgUpload(formData)
           .then(data => {
             // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
             if (data.success) {
               that.$refs.md.$img2Url(pos, data.data);
             } else {
               that.$message({
                 message: data.msg,
                 type: 'error',
                 showClose: true,
               });
             }
           })
           .catch(err => {
             that.$message({
               message: err,
               type: 'error',
               showClose: true,
             });
           });
       },
       //  外层取消
       cancel() {
         this.$alert('内容不会被保存，是否继续', '提示', {
           confirmButtonText: '确定',
           callback: action => {
             this.$router.back();
             this.$message({
               type: 'info',
               message: `已取消发布`,
             });
           },
         });
       },
       //  外层发布
       release() {
         this.$refs.wrtMask.style = '  display: block;';
       },

       // 遮罩层取消
       maskCancel(){
  this.$refs.wrtMask.style = '  display: none;';
       },
       },

       //  上传封面
       handleRemove(file, fileList) {
         console.log(file, fileList);
       },
       handlePreview(file) {
         console.log(file);
       },
       handleExceed(files, fileList) {
         this.$message.warning(
           `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
             files.length + fileList.length
           } 个文件`,
         );
       },
       beforeRemove(file, fileList) {
         return this.$confirm(`确定移除 ${file.name}？`);
       },
     },
   };
</script>

<style lang="less">
  @import url('../../state/mainPublic.less');

  .write {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-content: center;
    padding: 15px;

    // 点击发布弹出遮罩层
    .wrt-mask-box-father {
      display: none;
      .wrt-mask-box {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        padding: 15px;
        z-index: 999;
        background-color: rgba(0, 0, 0, 0.5);
        .mask-son {
          flex: 1;
          max-width: 750px;
          min-height: 508px;
          padding: 15px;
          border-radius: 16px;
          overflow: hidden;
          background-color: #fff;
          .son-title {
            height: 49px;
            padding: 10px 0px 15px 0px;
            .title-span {
              font-size: 18px;
              margin-left: 10px;
              cursor: pointer;
            }
          }
          .son-brief {
            margin-top: 50px;
            .el-textarea__inner:focus {
              border: 1px solid salmon;
            }
          }
          //  上传封面
          .son-cover {
            display: flex;
            height: 66px;
            align-items: center;
            margin-top: 40px;

            .cover-title {
              display: block;
              height: 30px;
              margin-top: 1px;
              margin-right: 10px;
              font-size: 16px;
              line-height: 30px;
            }
          }
          //  标签
          .son-tags {
            display: flex;
            height: 20px;
            align-items: center;
            margin-top: 40px;
            .tags-title {
              display: block;
              margin-right: 10px;
              font-size: 16px;
            }
          }
          // 遮罩层里面的按钮
          .son-btns {
            display: flex;
            justify-content: center;
            margin-top: 38px;
          }
        }
      }
    } // 遮罩层结束

    .write-topic {
      text-align: center;
      cursor: pointer;
    }
    .write-btns {
      margin: 15px 0;
      display: flex;
      justify-content: end;
      width: 100%;
    }
    .write-title {
      height: 50px;
      padding: 0 100px;
      margin-bottom: 10px;
      .el-textarea__inner {
        height: 50px !important;
        text-align: center;
        // line-height: 50px;
      }
    }
    .write-down {
      .me-editor {
        // display: block;
        z-index: 1;
        min-height: 500px !important;
      }
    }
  }

  /* .write {
    flex: 1;
    display: flex;
    width: 100vw;
    height: 100vh;
  }
  .write-down {
    position: absolute;
    display: flex;
    margin-bottom: 100px;
    margin-top: 100px;
    margin-left: 18.5%;
  }
  .write-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .me-write-input textarea {
    font-size: 32px;
    font-weight: 600;
    height: 20px;
    border: none;
  }
  .me-write-editor {
    min-height: 650px !important;
  }
  .v-note-wrapper {
    z-index: 9 !important;
  }
  .v-note-wrapper.shadow {
    max-width: 1000px;
    height: 500px;
    height: 750px;
  } */

  /* .write-topic {
    position: absolute;
    top: 10%;
    left: 20%;
    font-size: 24px;
    font-weight: 700;
  }
  .write-btns {
    position: absolute;
    top: 12%;
    left: 1023px;
  } */
</style>
